<template>
  <div :class="cellClass" id="cellText" align="center">
    <el-popover placement="top-start" width="250" trigger="hover" :disabled="row.ErrorCells?.indexOf(item.columnid) == -1">
      <div v-if="row.ErrorCells?.indexOf(item.columnid) > -1" slot="default" style="padding: 5px">
        <div v-for="(errMsg, index) in row.ErrorDetails[item.columnid]" :key="index">
          {{ errMsg }}
        </div>
      </div>
      <div slot="reference" id="popover_slot" style="min-height: 20px">
        <div v-if="item.datatype == '-1'">{{ row["ErrorMsg"] }}</div>
        <!-- input -->
        <!-- <el-input :disabled="disabled" v-if="item.datatype == '1' || item.datatype == '2'" v-model="row[item.columnid]" :maxlength="item.maxLength" type="text"></el-input> -->
        <span v-if="item.datatype == '1' || item.datatype == '2'" :id="item.columnid">{{ row[item.columnid] }}</span>
        <!-- radio -->
        <!-- <el-radio-group v-if="item.datatype == '3'" v-model="row[item.columnid]" :disabled="disabled">
      <el-radio v-for="i in item.options" :label="i.optionvalue" :key="i.optionvalue">{{ i.optiondisplay }}</el-radio>
    </el-radio-group> -->
        <span :id="item.columnid" v-if="item.datatype == '3'">{{ findValue(row[item.columnid], item.options) }}</span>
        <!-- checkbox -->
        <!-- <el-checkbox-group v-if="item.datatype == '4'" v-model="row[item.columnid]" :disabled="disabled">
      <el-checkbox v-for="i in item.options" :label="i.optionvalue" :key="i.optionvalue">{{ i.optiondisplay }}</el-checkbox>
    </el-checkbox-group> -->
        <span :id="item.columnid" v-if="item.datatype == '4'">{{ findValue(row[item.columnid], item.options) }}</span>
        <!-- select -->
        <!-- <el-select v-if="item.datatype == '5'" v-model="row[item.columnid]" placeholder="请选择" :disabled="disabled">
      <el-option v-for="option in item.options" :key="option.optionvalue" :label="option.optiondisplay" :value="option.optionvalue + ''"></el-option>
    </el-select> -->
        <span :id="item.columnid" v-if="item.datatype == '5'">{{ findValue(row[item.columnid], item.options) }}</span>

        <!-- cascader 地址 -->
        <span v-if="item.datatype == '6'" :id="item.columnid">
          <!-- <el-cascader popper-class="max300" :props="defaultProps1" :options="cityList" v-model="row[item.columnid]" clearable :disabled="disabled"></el-cascader>
      <el-input v-model="item.fieldItems[0].value" :maxlength="item.fieldItems[0].maxLength" type="text"></el-input> -->
          {{ getCityInfo }}
        </span>
        <!-- 部门 -->
        <!-- <el-cascader :disabled="disabled" v-if="item.datatype == '7'" :options="companySection" :props="defaultProps" v-model="row[item.columnid]" placeholder="部门" clearable></el-cascader> -->
        <!-- <el-select v-if="item.datatype == '7'" v-model="row[item.columnid]" placeholder="请选择" :disabled="disabled">
      <el-option v-for="option in subcompanyDepOptions" :key="option.key" :label="option.value" :value="option.key + ''"></el-option>
    </el-select> -->
        <span :id="item.columnid" v-if="item.datatype == '7'">{{ findValue(row[item.columnid], subcompanyDepOptions, { text: "value", value: "key" }) }}</span>
        <!-- picker -->
        <!-- <el-date-picker :disabled="disabled" align="center" v-if="item.datatype == '8'" v-model="row[item.columnid]" type="date" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker> -->
        <span :id="item.columnid" v-if="item.datatype == '8'">{{ row[item.columnid] }}</span>
        <!-- 公司 -->
        <!-- <el-select :disabled="disabled" v-if="item.datatype == '10'" v-model="row[item.columnid]" placeholder="请选择">
      <el-option v-for="option in Company" :key="option.subid" :label="option.subName" :value="option.subid"></el-option>
    </el-select> -->
        <span :id="item.columnid" v-if="item.datatype == '10'">{{ findValue(row[item.columnid], companySection, { text: "name", value: "id" }) }}</span>

        <!--  银行 -->
        <span :id="item.columnid" v-if="item.datatype == '14' && item.fieldItems">
          <!-- <el-select
        :disabled="disabled"
        v-model="row[item.columnid]"
        :ref="'Back' + index"
        filterable
        default-first-option
        :filter-method="
          (val) => {
            tailoringFilter(YeepayBank, { key1: 'key', key2: 'value' }, val, 'BankList', 'Back' + index);
          }
        "
        @blur="initTailoringData(YeepayBank, item.value, 'value', 'BankList', 'isBlur')"
        placeholder="请选择"
      >
        <el-option v-for="option in BankList" :key="option.key" :label="option.value" :value="option.key"></el-option>
      </el-select> -->
          <!-- <el-input v-model="row[item.columnid]" :maxlength="item.fieldItems[0].maxLength" type="text" :disabled="disabled"></el-input> -->
          {{ findValue(row[item.columnid], YeepayBank, { text: "value", value: "key" }) }}
        </span>
      </div>
    </el-popover>
  </div>
</template>
<script>
import { boolean } from "mathjs";
import { mapState } from "vuex";
export default {
  data() {
    return {
      row: {},
      defaultProps: {
        children: "childrens",
        label: "name",
        value: "id",
      },
      cellClass: "cell",
    };
  },
  props: {
    item: {},
    tempRow: {},
    disabled: {
      type: Boolean,
      default: false,
    },
    subcompanyDepOptions: [],
  },
  watch: {
    getCityInfo(newData) {
      if (newData == "请选择") {
        this.cellClass += "cell tips";
      } else {
        this.cellClass += "cell";
      }
    },
  },
  computed: {
    ...mapState({
      YeepayBank: (state) => state.personnel.YeepayBank,
      companySection: (state) => state.common.companySection,
      cityList: (state) => state.common.provinceCityList,
      Company: (state) => state.personnel.CompanyList,
    }),
    getCityInfo() {
      let text = "请选择";
      try {
        if (this.item.columnid.indexOf("province") > -1) {
          let province = this.cityList.find((m) => m.proID == this.row[this.item.columnid]);
          text = province.name;
        } else if (this.item.columnid.indexOf("city") > -1) {
          let columnid = this.item.columnid.replace("_city", "");
          let province = this.row[`${columnid}_province`];
          let citys = this.cityList.find((m) => m.proID == province).children;
          let city = citys.find((m) => m.cityID == this.row[this.item.columnid]);
          text = city.name;
        } else if (this.item.columnid.indexOf("county") > -1) {
          let columnid = this.item.columnid.replace("_county", "");
          let province = this.row[`${columnid}_province`];
          let city = this.row[`${columnid}_city`];
          let citys = this.cityList.find((m) => m.proID == province).children;
          let countys = citys.find((m) => m.cityID == city).children;
          let county = countys.find((m) => m.id == this.row[this.item.columnid]);
          text = county.name;
        }
        return text;
      } catch {
        return text;
      }
    },
  },
  created() {
    this.row = this.tempRow;
    if (this.tempRow["ErrorCells"]?.indexOf(this.item.columnid) > -1) {
      this.cellClass = this.cellClass + " error";
    }
  },
  mounted() {
    if (this.item.datatype == "6") {
      if (document.getElementById(this.item.columnid).innerText == "请选择") {
        this.cellClass = this.cellClass + " tips";
      }
    }
  },
  methods: {
    findValue(value, items, options) {
      let option = { text: "optiondisplay", value: "optionvalue" };
      if (options) {
        option = options;
      }
      let item = items.filter((m) => m[option.value] == value);
      if (item && item.length > 0) {
        return item.map((m) => m[option.text]).join(";");
      } else {
        this.cellClass = this.cellClass + " tips";
        return "请选择";
      }
    },
  },
};
</script>
<style lang="less">
.element {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}
#cellText {
  height: 100%;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}
.error {
  border: 1px solid red;
}
</style>
